<template>
  <div class="task-container" :class="rootElementClassNames" v-loading.fullscreen.lock="loadingPage" >
    <div id="task-edit-view"></div>
    <div id="task-edit-view-copy"></div>
    <form class="base-form bbx-normal-page-content" @submit.prevent v-if="init" novalidate>
      
      <div v-if="!isAgendaTask" class="fe-page-header">
        <div class="fe-page-header__left">
          {{ pageTitle }}
        </div>
        <div class="fe-page-header__right">
          <!-- start 工单按钮组 -->
          
          <!-- <button type="button" class="btn-text btn-back" :disabled="disabled" @click="goBack" v-if="isShowBackButton">
            返回
          </button> -->
          <FormCellChange v-if="!isShowRightCard" class="mar-r-8" :count="formCellCount" @update="(e)=>{formCellCount=e}" :disabled="!!isShowRightCard"></FormCellChange>
          
          <!-- start 新建按钮组 -->
          <template v-if="isShowTaskButtonGroup">

            <el-button v-if="isShowBackButton" class="fe-page-header__button" type="plain-third" :disabled="disabled" @click="goBack">
              {{$t('common.base.cancel')}}
            </el-button>

            <el-button v-if="isShowTemporarySaveButton" class="fe-page-header__button" type="plain-third" :disabled="disabled" @click="submit(false, 'draft')">
              {{$t('common.base.temporarySave')}}
            </el-button>
          
            <el-button class="fe-page-header__button" type="primary" :disabled="disabled" @click="submit(false)" v-if="isShowSaveButton" v-track="$track.formatParams('SAVE')">
              {{$t('common.base.save')}}
            </el-button>
            
            <el-button class="fe-page-header__button" type="primary" :disabled="disabled" @click="submit(false)" v-if="isShowOnlySaveButton" v-track="$track.formatParams('SAVE_ONLY')">
              {{needAppove ? $t('task.edit.submitForReview') : $t('task.edit.justSave')}}
            </el-button>
            
            <!-- <span class="text fe-page-header__separator" v-if="isShowSaveAndAllotButton"></span> -->
            
            <el-button class="fe-page-header__button" type="primary" :disabled="disabled" @click="submit(true)" v-if="isShowSaveAndAllotButton && !needAppove" v-track="$track.formatParams('SAVE_AND_ALLOT')">
              {{$t('task.edit.saveAndAllot')}}
            </el-button>
            
          </template>
          <!-- end 新建按钮组 -->
          
          <!-- start 新建计划任务 -->
          <el-button class="fe-page-header__button" type="primary" :disabled="disabled" v-if="isFromPlan || isPlanTaskCopy" @click="planTaskCreateDialogOpen" v-track="$track.formatParams('CREATE_PLAN_TASK')">
            {{$t('task.edit.saveToPlan')}}
          </el-button>
          <!-- end 新建计划任务 -->
          
          <!-- start 编辑计划任务 -->
          <el-button class="fe-page-header__button" type="primary" :disabled="disabled" @click="planTaskEditDialogOpen" v-if="isPlanTaskEdit && isCanTaskPlanEdit" v-track="$track.formatParams('EDIT_PLAN_TASK')">
            {{$t('task.edit.savePlan')}}
          </el-button>
          <!-- end 编辑计划任务 -->
          <!-- end 工单按钮组 -->

          
        </div>
        
      </div>

      <div v-if="isAgendaTask" class="pack-up" @click="packUp=!packUp">
        <span>{{$t('task.taskInfo')}}</span>
        <i class="iconfont icon-Icon_up" v-show="packUp"></i>
        <i class="iconfont icon-more" v-show="!packUp"></i>
      </div>

      <div class="task-form-container" >
        <!-- start 工单流程步骤 -->
        <task-process-steps :currentNodeId="currentNodeId" :taskFlowExtend="taskFlowExtend" v-if="!isAgendaTask" :template-id="currentTaskTemplateId" :state="currentTaskState" @updateCreateApprove="updateCreateApprove"></task-process-steps>
        <!-- end 工单流程步骤 -->

        <div :class="{'task-form-container-columns': isShowRightCard, 'agenda-task-form-container-columns' : isAgendaTask, 'task-form-container-cell' : formCellCount > 1}">
          <div class="task-form-container-left">
            <task-edit-form
                :plan-time-config="planTimeConfig"
                v-show="packUp"
                :agenda-task="isAgendaTask"
                :plan-start-time="planStartTime"
                :plan-end-time="planEndTime"
                :auth="auth"
                :fields.sync="fields"
                :state="state"
                :types="types"
                :url-params="urlParams"
                :value.sync="form"
                :is-edit="isTaskEdit"
                :form-cell-count="formCellCount"
                :submitCount="submitCount"
                ref="form"
                @togglePending="justTogglePending"
                @updatetemplateId="updateTaskTemplateId"
                @changeTemplateId='changeTemplateId'
                :formEditingMode="formEditingMode"
                @getDeleteFiles="getDeleteFiles"
            >
            </task-edit-form>

          </div>

          <div class="task-form-container-right">

            <!-- start 附加组件+备件服务清单物料申领tab -->
            <part-sevice-list
                ref="partServiceList"
                :showSparepartServiceList="!!showSparepartServiceList"
                :sparepart-config="sparepartConfig"
                :custom-card-list="customCardList"
                :task="workTask"
                :card-info="initData.cardInfo"
                :products="form.product"
                :task-options="currentTaskTypeOptions"
                :card-forms="cardForms"
                :propsForSubComponents="propsForSubComponents"
            />
            <!-- end 附加组件+备件服务清单物料申领tab -->

          </div>
        </div>
      </div>
      
    </form>

    <!-- start 新建/编辑 计划任务弹窗 -->
    <plan-task-edit-form :origin-form="form" :task-config="taskConfig" @loading="togglePending" @submit="submitWithPlanTask" ref="planTaskEditForm" :is-show-plan-start-time="isShowPlanStartTime" :is-show-plan-end-time='isShowPlanEndTime' :quality-field="qualityField">
    
    </plan-task-edit-form>
    <!-- end 新建/编辑 计划任务弹窗 -->
    
    <!-- start 分配弹窗 为了组件内部接收和工单详情、指派工单页面一样 传入planStartTime和planEndTime -->
    <task-allot-modal 
      v-if="Object.keys(allotTask).length > 0" 
      ref="TaskAllotModal" 
      :fields="fields" 
      :task="allotTask" 
      :is-copy-task="isCopyTask"
      :plan-start-time="allotTask.planStartTime" 
      :plan-end-time="allotTask.planEndTime" 
      :login-user="initData.loginUser"
      @success="onTaskAllotSuccessHandler"
    >
    </task-allot-modal>
    <!-- end 分配弹窗 -->

    <!-- start 工单发起质保审批弹窗 -->
    <propose-approve-dialog ref="proposeApprove" @success="onApproveSuccessHandler" />
    <!-- end 工单发起质保审批弹窗 -->

    <!-- start 工单发起审批弹窗 -->
    <propose-approve-dialog-2 ref="proposeApprove2" :options="approveDialogOptions" :task-id="taskId" @close="onApproveClosedHandler" />
    <!-- end 工单发起质保弹窗 -->

    <!-- start 提示弹窗 -->
    <base-modal :title="$t('common.base.toast')" :show.sync="DialogVisible" width="500px" class="batch-warning-dialog">
      <div class="subtext">{{ QualitySubtext }}</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="DialogVisible = false">{{$t('common.base.makeSure')}}</el-button>
      </div>
    </base-modal>
    <!-- end 提示弹窗 -->
  </div>
</template>

<script>
import TaskEditView from './TaskEditView';
export default TaskEditView;
</script>

<style lang="scss">
  @import './TaskEditView.scss';
  .agenda-task-edit-view {
    .pack-up {
      width: 100%;
      background: #FAFAFA;
      display: flex;
      align-items: center;
      padding: 4px;
      color: #999;
      span {
        flex: 1;
        color: #595959;
      }
    }
    .task-form-container {
      padding: 0;
    }
    .agenda-task-form-container-columns {
      flex-direction: column;
      width: 100%;
      .task-form-container-left, 
      .task-form-container-right {
        max-width: 100%;
        padding: 0;
      }
    }
  }
</style>
